@extends('layouts.app')

@section('title', '充值中心')

@section('header')
	@include('layouts.header-two')
@endsection


@section('content')
<div class="recharge-wrapper">
	<div class="search-bar"></div>	
	<div class="recharge-inner">
		<div class="container">
			<div class="recharge-tab">
				<h2>充值中心</h2>
				<div class="recharge-suit">
					<h3>选择充值套餐</h3>
					<div class="recharge-suit-inner">
						<div class="row">
							@foreach ($recharge_templets_list as $key => $item)
								<div class="col-md-4">
									<div class="recharge-suit-tab @if($key == 0) check @endif" data-coin={{ $item->id }}>
										<p>{{ $item->name }}</p>
										<p class="gold"><span>{{ $item->coin }}</span>金币</p>
										<i></i>
									</div>
								</div>
							@endforeach																		
						</div>
					</div>
				</div>
				<div class="recharge-pay">
					<h4>点击图标前往付款</h4>
					<div class="recharge-pay-tab">
						<div class="row">
{{--							<div class="col-md-6">--}}
{{--								<a href="javascript:void(0)">--}}
{{--									<div class="wechat-pay @if ($recharge_limit->wechat == 'off') pay-close @else pay-open @endif">--}}
{{--										<img src="{{ asset('statics/images/icon_wechat_rechargecenter.png') }}" alt="微信支付" />--}}
{{--									</div>--}}
{{--								</a>--}}
{{--							</div>--}}
							<div class="col-md-12">
								<a href="javascript:void(0)" id="cz_sbtn">
									<div class="alipay @if ($recharge_limit->alipay == 'off') pay-close @else pay-open @endif">
										<img src="{{ asset('statics/images/icon_alipay_rechargecenter.png') }}" alt="支付宝支付" />
									</div>
								</a>
							</div>
						</div>
					</div>
				</div>												
			</div>
		</div>
	</div>
</div>
@endsection


@section('footer')
	@include('layouts.footer')
	<!--------------------充值中-------------------->
 		<div class="on-recharge" id="on-recharge">
			<div class="recharge-bg"></div>
			<div class="recharge-feeback">
				<p>充值中</p>
				<img src="{{ asset('statics/images/loadings.gif') }}" alt="" />
				<div class="recharge-feeback-btn">
					<a href="{{ route('alipaysuccess') }}" class="finish">已完成充值</a>
					<a href="#" class="unfinished">未完成充值</a>
				</div>
			</div>			
 		</div>
 		<!--------------------支付不可用弹窗--------------------> 		
 		<div class="on-recharge" id="disabled-tab">
			<div class="recharge-bg"></div>
			<div class="recharge-feeback">
				<p>该支付方式暂时不可用</p>
				<div class="recharge-feeback-btn">
					<a href="#" class="confirm">确认</a>
				</div>
			</div>			
 		</div>
@endsection

@section('script')
<script>
//--------------------充值页面，选择充值套餐高亮--------------------//
$(".recharge-suit-tab").click(function(){
	$(".recharge-suit-tab").removeClass("check");
	$(this).addClass("check");	
// 	console.log();
// 	$(this).parent('a').attr('src') = "{{route('alipayweb')}}?pid=1&type=cz";
})

//--------------------充值面板微信不可用--------------------//
$(".pay-close img").click(function(){
	$("#disabled-tab").show();		
})
$(".confirm").click(function(){
	$("#disabled-tab").hide();	
})

//--------------------充值面板支付宝充值--------------------//
$(".pay-open img").click(function(){
	
	var coin = $('.recharge-suit-inner .check').data('coin');

	if(typeof(coin) == 'undefined')
	{
		alert('请选择套餐');
		return true;
	}
	$("#on-recharge").show();
	top.location.href = "{{route('alipayweb')}}?pid="+ coin +"&type=cz";
})
$(".unfinished").click(function(){
	$("#on-recharge").hide();	
})
</script>
@endsection